<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>学生作业</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/student_homework.css">
	<link rel="stylesheet" href="../css/main.css">

	<style>
		.underline {
			border-bottom: solid 3px #ffbb4c;
		}

		.content {
			margin-top: 0;
			background: none;
			margin-bottom: 60px;
		}

		.delete {
			height: 34px;
			width: 34px;
		}

		.add {
			border-top: thin solid #eee;
		}

		.add a * {
			vertical-align: middle;
		}

		.add a div {
			display: inline-block;
			height: 60px;
			line-height: 60px;
			color: deepskyblue;
		}

		.homework_head {
			height: 35px;
			border-bottom: 1px solid #ddd;
		}

		.time {
			font-size: 18px;
			line-height: 35px;
			margin-left: 5px;
			display: inline-block;
		}

		.result {
			height: 25px;
			width: 90px;
			float: right;
			font-size: 18px;
			letter-spacing: 3px;
			text-align: center;
			margin-top: 2px;
			margin-right: 5px;
			border-radius: 5px;
			color: #0a7c25;
			font-weight: bold;
			border: 2px solid #0a7c25;
		}

		.result3 {
			height: 25px;
			width: 90px;
			float: right;
			font-size: 18px;
			letter-spacing: 3px;
			text-align: center;
			margin-top: 2px;
			margin-right: 5px;
			border-radius: 5px;
			color: #cb0101;
			font-weight: bold;
			border: 2px solid #cb0101;
		}

		.homework_name {
			font-size: 20px;
			margin: 0 0;
			margin-top: -5px;
			letter-spacing: 5px;
		}
	</style>

</head>

<body>
	<div id="container">
		<div class="contain" id="vue-root">
			<div class="header">
				<div class="header_title">作业列表</div>
				<a onclick="history.back()">
					<img src="../image/return.png" alt="" class="return">
				</a>
				<a href="teacher_homework_item.html">
					<img src="../image/add.png" class="heder-add" />
				</a>
			</div>
			<div style="height: 40px;"></div>
			<div class="homework_top">
				<div class="header_content" :class="{underline:state==0}" @click="state=0">学生作业</div>
				<div class="header_mine" :class="{underline:state==1}" @click="state=1">我的发布</div>
			</div>
			<div class="time_all">
				<input class="date" type="date" v-model="date" />
			</div>
			<!-- 学生作业列表 -->
			<div class="content" v-if="state==0">
				<div>
					<a v-for="homework in homeworks" :key="homework.id"
						:href="'student_homework_detalis.html?id='+homework.id">
						<div class="homework_list">
							<div class="homework_head">
								<div class="time" v-text="homework.publishTime"></div>
								<div class="result3" v-text="{1:'未批改',2:'已批改'}[homework.status]"></div>
							</div>
							<div class="homework">
								<div class="homework_content">
									<h3 class="homework_name" v-text="homework.courseName+'作业'"></h3>
									<div class="homework_time" v-text="homework.publishTime"></div>
									<div class="homework_classes" v-text="homework.classesName"></div>
									<div class="homework_object" v-text="homework.studentName"></div>
								</div>
							</div>
						</div>
					</a>
				</div>
			</div>
			<!-- 我的发布列表 -->
			<div class="content" v-if="state==1">
				<div>
					<a v-for="homework in homeworks" :key="homework.id"
						:href="'teacher_homework_detalis.html?id='+homework.id">

						<div class="homework_list">
							<div class="homework_head">
								<div class="time" v-text="homework.publishTime"></div>
								<img src="../image/delete.png" @click="del(homework.id)"
									style="float: right; margin-right: 5px; margin-top: 2px;" />
							</div>
							<div class="homework">
								<div class="homework_content">
									<h3 class="homework_name" v-text="homework.courseName+'作业'"></h3>
									<div class="homework_time" v-text="homework.publishTime"></div>
									<div class="homework_classes" v-text="homework.classesName"></div>
									<div class="homework_object" v-text="homework.studentName"></div>
									<div class="homework_classes" style="height: auto;clear: both;">
										<template v-for="classesName in homework.classesNames">
											<span v-text="classesName"></span><br>
										</template>
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
			</div>
		</div>

	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>
	<script src="/js/common.js"></script>
	<script>
		var app = new Vue({
			el: '#vue-root',
			data: {
				state: 0,
				date: dayjs().format('YYYY-MM-DD'),
				homeworks: []
			},
			created: function () {
				this.getData();
			},
			methods: {
				getData: function () {
					var url = this.state == 0 ? '/t/homework/done' : '/t/homework/list';

					axios.get(url, {
						params: {
							date: this.date
						}
					}).then(function (res) {
						this.homeworks = res.data;
					}.bind(this));
				},
				del: function (id) {
					if (confirm('确定删除？')) {
						axios.post('/t/homework/del/' + id).then(function (res) {
							this.getData();
						}.bind(this));
					}
				},
				getImg: function (status) {
					if (status == 1) return '../image/homework_uncheck.svg';
					if (status == 2) return '../image/homework_checked.svg';
					return null;
				}
			},
			watch: {
				date: function (newValue, oldValue) {
					this.getData();
				},
				state: function (newValue, oldValue) {
					this.getData();
				}
			}
		});
	</script>

</body>

</html>